<template>
  <div class="flow-row">
    <div class="flow-box">
      <div class="flow-item" :class="{ 'flow-item-active': isActive }"
           @click="!readable && open('flowEventSetting', node)">
        <div class="node-name" :class="nameClass(node, 'node-temmi')">
          事件
          <div v-if="!readable" class="close-icon">
            <el-icon @click.stop="delNode(node)">
              <CircleClose/>
            </el-icon>
          </div>
        </div>
      </div>
      <FlowAddNode :node="node" @update:node="node = $event" :nodeType="5" :readable="readable"/>
    </div>
    <FlowEventDrawer ref="flowEventDrawer" @close="isActive = false" />
  </div>
</template>
<script setup name="FlowEventNode">
import {flowMixin} from '../../../mixins/flowMixin';
import FlowAddNode from '../flowAddNode.vue';
import FlowEventDrawer from '../drawer/FlowEventDrawer.vue';

import {reactive, ref, createApp, defineEmits, defineProps, computed, onMounted, toRefs} from "vue";
import flowhook from '../../../mixins/flowhook';

const {uuid,nameClass,delNode} = flowhook();

const isActive = ref(false);
const flowEventDrawer = ref(null);

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  readable: {
    type: Boolean,
    default: false,
  },
})

const open = (name, node, routeNode) => {
  console.log("------开始提示")
  isActive.value = true;
  flowEventDrawer.value.showDrawer(node, routeNode);
}

</script>
